<template>
  <div>
    <!-- <div class="topheader">
      <div class="Theadermain">
        <div class="headerimg" @click="back">
          <img src="../../../assets/img20.png" width="100%" />
        </div>
        <div>积分明细</div>
        <div style="width: 0.5rem; margin-left: 10px"></div>
      </div>
    </div> -->
    <div class="main">
      <div class="car_list">
        <div
          style="width: 50%; text-align: center; margin: 5% auto"
          v-show="xianshi"
        >
          <van-loading />
        </div>
        <div style="text-align: center; padding: 20px;" v-show="yincang">
          <div class="zwxximg" style="margin-top:50%">
            <img src="../../../assets/zwxx.png" alt="" />
          </div>
          <div class="zwxx">暂无数据</div>
        </div>
        <div class="list" v-for="(item, index) in RecordList" :key="index">
          <div class="left">
            <div class="le_title" v-html="item.content"></div>
            <div class="le_time">{{ item.createTime }}</div>
          </div>
          <div class="right" v-if="item.state == 0">+{{ item.amount }}</div>
          <div class="right" v-if="item.state == 1">-{{ item.amount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      xianshi: true,
      yincang: false,
      RecordList: [
        {
          id: 1,
          name: "签到奖励",
          createTime: "2021-10-11 15:37",
          grade: "+100",
        },
        {
          id: 2,
          name: "阅读文章奖励",
          createTime: "2021-10-11 15:37",
          grade: "+10",
        },
        {
          id: 3,
          name: "签到奖励",
          createTime: "2021-10-11 15:37",
          grade: "+100",
        },
      ],
    };
  },
  created() {
    this.userpointsList();
  },
  methods: {
    userpointsList() {
      request({
        url: "/generator/userpoints/front/list",
        method: "get",
      }).then((response) => {
        console.log(response.list.rows);
        this.RecordList = response.list.rows;
        this.xianshi = false;
        if (this.RecordList == "") {
          this.yincang = true;
        }else{
          this.yincang = false;
        }
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
  },
};
</script>

<style scoped>
.topheader {
  width: 100%;
  background-color: black;
}
.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #b6bfd0;
}
.le_title {
  font-weight: bold;
}
.le_time {
  color: #b6bfd0;
}
.right {
  font-size: 20px;
  color: #f6a15d;
}
.zwxximg {
  widows: 100%;
  text-align: center;
}
.zwxx {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
</style>